<template>
  <div class="wrap">
    <div class="box">
      <div class="top">
        <div class="left">
          <div class="input">日期</div>
          <div class="input">关键字</div>
          <div class="btn"></div>
        </div>
        <div class="right">下载报告</div>
      </div>
      <div class="sec">
        <div class="left">
          <div class="tit">质量分析</div>
          <div id="e1"></div>
          <div class="zhicha">
            <div class="cn">质差</div>
            <span>**************************************</span>
          </div>
          <div class="list">
            <div class="item">
              <div class="itembox"></div>
              <div class="name">XXXXX</div>
            </div>
            <div class="item">
              <div class="itembox"></div>
              <div class="name">XXXXX</div>
            </div>
            <div class="item">
              <div class="itembox"></div>
              <div class="name">XXXXX</div>
            </div>
            <div class="item">
              <div class="itembox"></div>
              <div class="name">XXXXX</div>
            </div>
            <div class="item">
              <div class="itembox"></div>
              <div class="name">XXXXX</div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="tit">得分趋势</div>
          <div id="e2"></div>
        </div>
      </div>
      <div class="sec sec2">
        <div class="left">
          <div class="tit">问题数量趋势</div>
          <div id="e3"></div>
        </div>
        <div class="right">
          <div class="tit">质量评估维度</div>
          <div id="e4"></div>
          <div class="tips">
            <div class="tips-cn one">参与部门</div>
            <div class="tips-cn">占比</div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <img src="../assets/wtclqk_bg.png" alt="" />
        <div id="e5"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  mounted() {
    this.init1();
    this.init2();
    this.init3();
    this.init4();
    this.init5();
  },
  methods: {
    init1() {
      let chartDom = document.getElementById("e1");
      let myChart = echarts.init(chartDom);

      let data = [
        {
          value: 30,
          name: "1",
        },
        {
          value: 70,
          name: "2",
        },
      ];
      let option = {
        title: {
          text: "得分45.8",
          x: "center",
          y: "center",
          textStyle: {
            fontWeight: 600,
            fontSize: 18,
          },
        },
        series: [
          {
            type: "pie",
            selectedMode: "single",
            radius: ["35%", "50%"],
            label: {
              normal: {
                position: "inner",
                formatter: "{d}%",
                showLabel: false,
                textStyle: {
                  color: "#fff",
                  fontWeight: "bold",
                  fontSize: 0,
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: data,
            itemStyle: {
              normal: {
                color: function (colors) {
                  let list = ["#D86A69", "#5CC975"];
                  return list[colors.dataIndex];
                },
              },
            },
          },
          {
            type: "pie",
            radius: ["50%", "65%"],
            itemStyle: {
              normal: {
                color: function (colors) {
                  let list = ["#BCFDFE", "#6BC0F0", "#97E07C", "transparent"];
                  return list[colors.dataIndex];
                },
              },
            },
            label: {
              normal: {
                position: "inner",
                formatter: "{c}家",
                textStyle: {
                  color: "#777777",
                  fontWeight: "bold",
                  fontSize: 0,
                },
              },
            },
            data: [
              {
                value: 40,
                name: "1",
              },
              {
                value: 20,
                name: "2",
              },
              {
                value: 10,
                name: "3",
              },
              {
                value: 30,
                name: "4",
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
    init2() {
      let chartDom = document.getElementById("e2");
      let myChart = echarts.init(chartDom);
      let option = {
        grid: {
          left: 50,
          right: 50,
          top: 30,
        },
        xAxis: {
          type: "category",
          data: [
            "2021/02/02",
            "2021/02/03",
            "2021/02/04",
            "2021/02/05",
            "2021/02/06",
            "2021/02/07",
          ],
        },
        yAxis: {
          type: "value",
          max: 120,
        },
        series: [
          {
            data: [100, 30, 40, 100, 90, 40],
            type: "bar",
            barWidth: 20,
            itemStyle: {
              barBorderRadius: [5, 5, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                { offset: 1, color: "#FF6C6C" },
                { offset: 0, color: "#FDF482" },
              ]),
            },
          },
          {
            data: [30, 50, 50, 80, 50, 30],
            type: "bar",
            barWidth: 20,
            itemStyle: {
              barBorderRadius: [5, 5, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                { offset: 1, color: "#C482FD" },
                { offset: 0, color: "#6C99FF" },
              ]),
            },
          },
          {
            data: [80, 100, 30, 90, 70, 20],
            type: "bar",
            barWidth: 20,
            itemStyle: {
              barBorderRadius: [5, 5, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                { offset: 1, color: "#B6FD82" },
                { offset: 0, color: "#6CFFF9" },
              ]),
            },
            barGap: 1,
          },
        ],
      };
      myChart.setOption(option);
    },
    init3() {
      let chartDom = document.getElementById("e3");
      let myChart = echarts.init(chartDom);

      let option = {
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["xx", "xx", "xx", "xx", "xx", "xx"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [10, 22, 18, 20, 17, 15],
            type: "line",
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                { offset: 1, color: "#1890FF" },
                { offset: 0, color: "#fff" },
              ]),
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    init4() {
      let chartDom = document.getElementById("e4");
      let myChart = echarts.init(chartDom);

      let option = {
        grid: {
          top: 0,
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["55%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 20,
              borderColor: "#fff",
              borderWidth: 10,
            },
            label: {
              position: "center",
              normal: {
                show: true,
                formatter: ["  {a|{d}%}"].join("\n"), //用\n来换行
                rich: {
                  a: {
                    fontSize: 16,
                    left: 20,
                    padding: [-25, -50, 0, -60], //位置按需要调整
                  },
                },
              },
            },
            labelLine: {
              length: 30,
              length2: 50,
              lineStyle: {
                width: 2,
              },
            },
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" },
            ],
          },
        ],
      };

      myChart.setOption(option);
    },
    init5() {
      let chartDom = document.getElementById("e5");
      let myChart = echarts.init(chartDom);

      let option = {
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: 70, name: "Search Engine" },
              { value: 20, name: "Direct" },
              { value: 10, name: "Email" },
            ],
            label: {
              show: false,
            },
          },
        ],
      };

      myChart.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.wrap {
  width: 100%;
  height: 1650px;
  background: url("../assets/shbg.png") no-repeat top;
  background-size: cover;
  position: relative;
  .box {
    width: 1658px;
    height: 1410px;
    box-shadow: -5px -5px 10px 1px rgba(23, 45, 88, 0.03);
    background: #fff;
    position: absolute;
    top: 230px;
    right: 0;
    padding: 18px 20px 0 31px;
    .top {
      display: flex;
      justify-content: space-between;
      .input {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 280px;
        height: 44px;
        background: #ffffff;
        border-radius: 5px 5px 5px 5px;
        opacity: 1;
        border: 1px solid #d0d5dd;
        font-size: 18px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: rgba(23, 45, 89, 0.8);
        padding-left: 13px;
        margin-right: 13px;
      }
      .btn {
        width: 44px;
        height: 44px;
        background: url("../assets/zu45058.png") no-repeat center;
        background-size: contain;
      }
      .left {
        display: flex;
      }
      .right {
        width: 110px;
        height: 44px;
        background: #519df5;
        border-radius: 5px 5px 5px 5px;
        font-size: 18px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        text-align: center;
        line-height: 44px;
        margin-right: 9px;
      }
    }
  }
  .sec {
    padding-top: 16px;
    display: flex;
    .left {
      width: 495px;
      height: 360px;
      background: #ffffff;
      box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      border: 1px solid rgba(230, 230, 230, 0.5);
      .tit {
        padding-left: 17px;
        padding-top: 12px;
        font-size: 18px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        color: #333333;
        text-align: left;
      }
    }
    #e1 {
      width: 590px;
      height: 350px;
      position: absolute;
      left: -110px;
      top: 0;
    }
    .left {
      position: relative;
      .zhicha {
        position: absolute;
        bottom: 20px;
        left: 14px;
        .cn {
          display: inline-block;
          width: 110px;
          height: 44px;
          background: #ffffff;
          border-radius: 5px 5px 5px 5px;
          opacity: 1;
          border: 1px dashed #d86a69;
          color: #d86a69;
          font-size: 18px;
          text-align: center;
          line-height: 44px;
        }
        span {
          display: inline-block;
          font-size: 16px;
          color: #868686;
          margin-left: 10px;
          vertical-align: bottom;
        }
      }
      .list {
        position: absolute;
        top: 101px;
        left: 323px;
        .item {
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          .itembox {
            width: 30px;
            height: 22px;
            border-radius: 2px 2px 2px 2px;
            opacity: 1;
          }
          .name {
            font-size: 16px;
            color: #000;
            margin-left: 10px;
          }
          &:nth-child(1) {
            .itembox {
              background: #a9ffff;
            }
          }
          &:nth-child(2) {
            .itembox {
              background: #4ac2f5;
            }
          }
          &:nth-child(3) {
            .itembox {
              background: #7ee46e;
            }
          }
          &:nth-child(4) {
            .itembox {
              background: #00cd6b;
            }
          }
          &:nth-child(5) {
            .itembox {
              background: #73c0de;
            }
          }
        }
      }
    }
    .right {
      flex: 1;
      height: 360px;
      background: #ffffff;
      box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      border: 1px solid rgba(230, 230, 230, 0.5);
      margin-left: 20px;
      .tit {
        padding-left: 17px;
        padding-top: 12px;
        font-size: 18px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        color: #333333;
        text-align: left;
      }
      #e2 {
        width: 100%;
        height: 100%;
      }
    }
  }
  .sec2 {
    .left {
      width: 1000px;
      height: 440px;
      #e3 {
        width: 100%;
        height: 100%;
      }
    }
    .right {
      height: 440px;
      position: relative;
      #e4 {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 10px;
        left: 0;
      }
      .tips {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 19px;
        color: #1890ff;
        font-weight: bold;
        .tips-cn.one {
          margin-bottom: 15px;
        }
      }
    }
  }
  .bottom {
    position: absolute;
    bottom: 0;
    left: 22px;
    width: 1625px;
    overflow: hidden;
    img {
      width: 100%;
    }
    #e5 {
      width: 400px;
      height: 400px;
      position: absolute;
      bottom: -73px;
      left: 170px;
    }
  }
}
</style>
